<script setup lang="ts">
import { employeeAddApi, employeeEditApi } from '@/apis/employee'
import type { EmployeeI } from '@/types/employee'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const props = defineProps(['dialogVisible', 'dialogParams', 'roleList'])
const emit = defineEmits([
  'update:dialogVisible',
  'update:dialogParams',
  'success',
])
const title = ref('添加员工')
const defaultParams = {
  id: undefined,
  name: '',
  roleId: undefined,
  status: undefined,
  userName: '',
  phonenumber: '',
}
const params = ref<EmployeeI>({
  id: undefined,
  name: '',
  roleId: undefined,
  status: undefined,
  userName: '',
  phonenumber: '',
})
const rules = {
  name: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  userName: [{ required: true, message: '请输入登录账号', trigger: 'blur' }],
  phonenumber: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  roleId: [{ required: true, message: '请选择分配角色', trigger: 'blur' }],
  status: [{ required: true, message: '请选择员工状态', trigger: 'blur' }],
}
const formRef = ref()
const closeDialog = () => {
  emit('update:dialogVisible', false)
  emit('update:dialogParams', { ...defaultParams })
  formRef.value.resetFields()
  params.value = { ...defaultParams }
}
const openDialog = () => {
  params.value = { ...props.dialogParams }
}
const onSubmit = async () => {
  await formRef.value.validate()

  if (params.value.id) {
    await employeeEditApi(params.value)
    ElMessage.success('编辑成功~')
  } else {
    await employeeAddApi(params.value)
    ElMessage.success('添加成功~')
  }

  closeDialog()
  emit('success')
}
const radio = ref(0)
</script>

<template>
  <el-dialog
    :model-value="dialogVisible"
    width="35%"
    :title="title"
    top="5vh"
    @close="closeDialog"
    @open="openDialog"
  >
    <el-form
      style="width: 70%; margin: 10px auto"
      label-position="top"
      :model="params"
      :rules="rules"
      ref="formRef"
    >
      <el-form-item label="员工姓名" prop="name">
        <el-input placeholder="请输入员工姓名" v-model="params.name" />
      </el-form-item>
      <el-form-item label="登录账号" prop="userName">
        <el-input placeholder="请输入登录账号" v-model="params.userName" />
      </el-form-item>
      <el-form-item label="联系方式" prop="phonenumber">
        <el-input placeholder="请输入联系方式" v-model="params.phonenumber" />
      </el-form-item>
      <el-form-item>
        <span style="color: black">默认密码:&nbsp;&nbsp;</span>123456
      </el-form-item>
      <el-form-item label="分配角色" prop="roleId">
        <el-select placeholder="请选择分配角色" v-model="params.roleId">
          <el-option
            v-for="item in roleList"
            :key="item.roleId"
            :label="item.roleName"
            :value="item.roleId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="员工状态" prop="status">
        <el-radio-group v-model="params.status">
          <el-radio :value="0" size="large">禁用</el-radio>
          <el-radio :value="1" size="large">启用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="onSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  ::v-deep(.el-form-item__label) {
    color: rgb(39, 39, 39);
    font-weight: 500;
  }
}
</style>
